Actualmente estoy tratando de construir una biblioteca de administración de estado para ReactJs. Pero tan pronto como lo implemento en mi proyecto React (creado con create-react-app ), comienza a arrojar este error:
Failed to compile. path/to/agile/dist/runtime.js 116:104 Module parse failed: Unexpected token (116:104) File was processed with these loaders: * ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | if (subscriptionContainer instanceof sub_1.CallbackContainer) subscriptionContainer.callback(); // If Component based subscription call the updateMethod which every framework has to define | > if (subscriptionContainer instanceof sub_1.ComponentContainer) if (this.agileInstance.integration?.updateMethod) this.agileInstance.integration?.updateMethod(subscriptionContainer.component, Runtime.formatChangedPropKeys(subscriptionContainer)); | }); // Log Job |Si comento las líneas de código resaltadas mencionadas en el error, salta a otro punto y se queja allí. Pero no puede ser un error de sintaxis porque TypeScript también se quejaría en el IDE.
Cómo funciona la herramienta: Al principio tienes que definir un framework, en este caso React. Luego puede crear un estado y suscribir este estado a un componente funcional de React a través de un gancho. El gancho utilizado para vincular el estado al componente React simplemente crea una devolución de llamada que activa una nueva representación (mediante la mutación de un useReducer ) y asigna esta devolución de llamada al estado suscrito.
Si desea obtener más información, consulte este repositorio: https://github.com/agile-ts/agile
Dependencias:
Biblioteca de gestión de estado de terceros:
"dependencies": { "@types/chai": "^4.2.12", "@types/mocha": "^8.0.2", "chai": "^4.2.0", "eslint-config-prettier": "^6.11.0", "mocha": "^8.1.1", "prettier": "2.0.5", "ts-node": "^8.10.2", "tsc-watch": "^4.1.0", "tslib": "^2.0.0", "typescript": "^3.9.7" }v14.8.0Proyecto Reaccionar:
"dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.3", "typescript": "~3.7.2", "agile-framework": "file:../../" },16.13.16.14.7El problema es que estás emitiendo ES2020 a dist/ . Si miras la línea de la que se queja:
if (subscriptionContainer instanceof sub_1.ComponentContainer) if (this.agileInstance.integration?.updateMethod) this.agileInstance.integration?.updateMethod(subscriptionContainer.component, Runtime.formatChangedPropKeys(subscriptionContainer)); // ^^ // ^^puede ver que está usando el operador de encadenamiento opcional en el código emitido. Por lo tanto, los consumidores de su biblioteca deberán tener la configuración adecuada para manejar este tipo de código. Su consumidor de ejemplo, la aplicación CRA, está usando Babel; aunque la configuración tiene la transformación para el encadenamiento opcional, solo se ejecuta en el código fuente de la aplicación React en sí, no en sus dependencias (incluida su biblioteca).
Una opción para solucionarlo es emitir un código menos moderno, lo que reducirá la cantidad de configuración que necesitan los consumidores. Por ejemplo, si apunta a ES6 usando la siguiente configuración en tsconfig.json :
{ "target": "ES6", "lib": ["DOM", "ES6", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"], // ... }la aplicación React puede al menos comenzar sin que necesites cambiar tu código fuente.
En caso de que no sea el autor de la biblioteca, o no desee cambiarla como sugiere la respuesta aceptada, puede hacer lo siguiente:
cambie la lista de navegadores como sugiere @adlerer:
"browserslist": [ ">0.2%", "not dead", "not op_mini all" ], (asegúrese de no tener una configuración especial para development en la lista de browserslist )
borrar caché npm:
npm cache clean --forcereinstalar cosas como @Gel sugiere:
rm -rf node_modules && rm -f package-lock.json && npm iEsto es lo que me ayudó después de horas de investigación y ensayos.
El problema en este caso es que la versión 3.2.0 de react-leaflet no funciona para todos los proyectos (realmente no sé por qué). estoy trabajando con reaccionar usando CRA tomar nota antes de hacer cualquier cosa Ahora la solución...
"reaccionar-hoja": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",
esa es la forma en que resolví el problema. el enlace a la respuesta en otro sitio web. https://www.gitmemory.com/issue/PaulLeCam/react-leaflet/891/860223422